<template>
    <el-row>
        <el-col :span="24">
            <el-row style="text-align: left; margin: 10px 0">
                <el-col :span="7"
                    >ID:<el-input
                        v-model="search.id"
                        style="width: 240px"
                        placeholder="请输入ID"
                        clearable
                /></el-col>
                <el-col :span="7"
                    >标题:<el-input
                        v-model="search.title"
                        style="width: 240px"
                        placeholder="请输入标题"
                        clearable
                /></el-col>
                <el-col :span="7"
                    >内容:<el-input
                        v-model="search.content"
                        style="width: 240px"
                        placeholder="请输入内容"
                        clearable
                /></el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="sosuo()">搜索</el-button>
                </el-col>
            </el-row>
        </el-col>
        <el-col style="text-align: left; margin: 0 0 10px 0"
            ><el-button type="primary" #default="scope" @click="add(scope)"
                >新增</el-button
            ></el-col
        >
        <el-col>
            <el-table :data="arrayList" border style="width: 80%">
                <el-table-column
                    prop="id"
                    label="ID"
                    align="center"
                    label-class-name="header"
                />
                <el-table-column
                    prop="title"
                    label="标题"
                    align="center"
                    label-class-name="header"
                />
                <el-table-column
                    prop="content"
                    label="内容"
                    align="center"
                    label-class-name="header"
                />
                <el-table-column
                    prop="del"
                    label="上下架"
                    align="center"
                    label-class-name="header"
                >
                    <template #default="scope">
                        <div v-if="scope.row.del == 1" class="up">上架</div>
                        <div v-else class="down">下架</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    label-class-name="header"
                >
                    <template #default="scope">
                        <el-button type="text" @click="edit(scope)"
                            >编辑</el-button
                        >
                        <el-button type="text" @click="remove(scope)"
                            >删除</el-button
                        >
                        <el-button
                            type="text"
                            v-if="scope.row.del == 0"
                            @click="shangjia(scope)"
                            >立即上架</el-button
                        >
                        <el-button type="text" v-else @click="shangjia(scope)"
                            >立即下架</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" :total="10">
            </el-pagination>
        </el-col>
        <el-dialog
            v-model="show"
            :title="title"
            width="600"
            style="text-align: left"
        >
            <BianJi
                :key1="qingxu.id"
                v-if="title == '编辑'"
                :qingxu="qingxu"
                @operate="operateAction"
            ></BianJi>
            <ShanChu
                :key2="qingxu.id"
                v-else-if="title == '提示'"
                :qingxu="qingxu"
                @delate="Delate"
            ></ShanChu>
            <XinZeng v-else @add="Add"></XinZeng>
        </el-dialog>
        <el-col style="text-align: left">
            <el-button style="margin-right: 20px" @click="return1"
                >返回</el-button
            >
        </el-col>
    </el-row>
</template>

<script setup>
    import { onMounted, ref, defineProps, defineEmits, reactive } from "vue";
    import axios from "axios";
    import qs from "qs";
    import ShanChu from "./components2/ShanChu";
    import XinZeng from "./components2/XinZeng.vue";
    import BianJi from "./components2/BianJi.vue";
    let show = ref(false);
    let arrayList = ref([]);
    let title = ref("");
    let qingxu = ref();
    let emits = defineEmits("change2");
    const props = defineProps({
        ids: {
            type: Number
        }
    });
    const info = ref(props.ids);
    let id = ref(info);
    console.log(id);

    async function start() {
        let res = await axios.get(
            `http://localhost:8080/qingxu/select?id=${id.value}`
        );
        console.log(res.data);
        arrayList.value = res.data;
        console.log(arrayList);
    }
    onMounted(function () {
        start();
    });
    let shangjia = async function (scope) {
        let a = scope.row.del == 1 ? 0 : 1;
        console.log(a);
        console.log(scope.row.del);
        await axios.post(
            "http://localhost:8080/qingxu/update",
            qs.stringify({
                ...scope.row,
                del: a,
                id: scope.row.id,
                cId: id.value
            })
        );
        start();
    };
    const Delate = async function (data) {
        console.log(data);

        if (data) {
            await axios.post(
                "http://localhost:8080/qingxu/delete",
                qs.stringify({
                    ...data
                })
            );
            let index = arrayList.value.findIndex((item) => item.id == data.id);
            arrayList.value.splice(index, 1);
        }
        show.value = false;
        start();
    };
    const Add = async function (data) {
        if (data) {
            await axios.post(
                "http://localhost:8080/qingxu/add",
                qs.stringify({
                    ...data,
                    cId: id.value
                })
            );
        }
        show.value = false;
        start();
    };
    const operateAction = async function (data) {
        console.log(data);

        if (data) {
            await axios.post(
                "http://localhost:8080/qingxu/update",
                qs.stringify({
                    ...data,
                    cId: id.value
                })
            );
        }
        show.value = false;
        start();
    };
    const remove = function (value) {
        console.log(value);
        title.value = "提示";
        qingxu.value = value.row;

        show.value = true;
    };
    const add = function () {
        show.value = true;
        title.value = "新增";
    };
    const edit = function (value) {
        show.value = true;
        title.value = "编辑";
        qingxu.value = value.row;
    };
    const return1 = function () {
        emits("change2");
    };
    const search = reactive({
        id: "",
        title: "",
        content: ""
    });

    const sosuo = async function () {
        let res = await axios.get(
            `http://localhost:8080/qingxu/selectAll?id=${search.id}&title=${search.title}&content=${search.content}`
        );
        console.log(res);
        //修改列表数据
        arrayList.value = res.data;
    };
</script>

<style lang="less" scoped>
    .up {
        padding: 5px;
        background-color: #eafaf0;
        color: #13ce66;
        font-size: 12px;
        width: 50px;
        border: 1px solid #d7f5df;
        border-radius: 5px;
        margin: 0 auto;
    }

    .down {
        padding: 5px;
        background-color: #fceded;
        color: #ff4949;
        font-size: 12px;
        width: 50px;
        border: 1px solid #f9dbdb;
        border-radius: 5px;
        margin: 0 auto;
    }
</style>